<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2-不用柯里化的实现</title>
    </head>
    <body>
        <!-- 准备好DOM容器 -->
        <div id="test"></div>

        <!-- 必须按照顺序引入JS -->
        <!-- 引入React核心库 -->
        <script src="../js/react.development.js"></script>
        <!-- 引入react-dom库，用于操作DOM -->
        <script src="../js/react-dom.development.js"></script>
        <!-- 引入babel，用于将JSX翻译为JS -->
        <script src="../js/babel.min.js"></script>

        <!-- type必须为text/babel，代表里面的内容为JSX -->
        <script type="text/babel">
            class Login extends React.Component {
                state = {
                    username: "",
                    password: "",
                };

                // 保存表单数据
                saveFormData = (dataName, event) => {
                    this.setState({ [dataName]: event.target.value });
                };

                login = (event) => {
                    // 阻止表单提交
                    event.preventDefault();

                    const { username, password } = this.state;

                    alert(`用户名：${username}  密码：${password}`);
                };

                render() {
                    return (
                        <form onSubmit={this.login}>
                            <span>用户名：</span>
                            <input
                                onChange={(event) => {
                                    this.saveFormData("username", event);
                                }}
                                type="text"
                                name="username"
                            />
                            <span>密码：</span>
                            <input
                                onChange={(event) => {
                                    this.saveFormData("password", event);
                                }}
                                type="password"
                                name="password"
                            />
                            <button>登录</button>
                        </form>
                    );
                }
            }

            ReactDOM.render(<Login />, document.getElementById("test"));
        </script>
    </body>
</html>
